<template>
  <div class="order-wrapper">
  	<mt-header fixed :title="orderobj.id+'已接订单'">
  		<router-link to="/home/list" slot="left">
		    <mt-button icon="back">返回</mt-button>
		</router-link>
  	</mt-header>
  	<div class="order-wrapper-context">
		<m-ordermap id="ordermap"></m-ordermap>
		<m-orderdetail :orderobj="orderobj" :className="'order-base-content order-hasmap-content'"></m-orderdetail>
		<div class="btn-cancel">
			<div class="flex-box">
				<mt-button type="primary" @click="endorder">结束订单</mt-button>
				<mt-button type="danger" @click="cancleorder">取消订单</mt-button>
			</div>
		</div>
  	</div>
  </div>
</template>

<script>
import { MessageBox } from 'mint-ui';
import mOrderdetail from '@/components/basecom/orderdetail';
import {mapGetters, mapMutations} from 'vuex';
import mOrdermap from '@/components/basecom/ordermap';
import axios from '@/api/axios';
export default {
	data: function () {
		return {
			orderobj: {
				id: this.$route.query.orderid,
				kilometre: this.$route.query.kilometre,
				truckload: this.$route.query.truckload,
				datalist: null
			},
			cancelreason: null
		}
	},
	created: function () {
		this.orderobj.datalist = this.getAcOrderMsg();
	},
	methods: {
		...mapMutations(['cancleOrder']),
		...mapGetters(['getAcOrderMsg', 'getOrderId', 'getAcId', 'getId']),
		cancleorder: function () {
			MessageBox.prompt('请填写取消' + this.orderobj.id + '订单原因').then(({ value, action }) => {
			  if (value) {
			  	this.cancelreason = value;
			  	this.sendCancle();
			  	return;
			  }else {
			  	this.$toast('请填写原因');
			  }
			},reject => {
				
			});
		},
		sendCancle: function () {
			var setting = {
				method: 'POST',
				url: '/getTruckCancelOrders'
			};
			var freightId = this.getOrderId();
			var phone = this.getId();
			var id = this.getAcId();
			var data = {
				freightId: id,
				phone: phone,
				mark: this.cancelreason
			};
			axios((res) => {
				if(res.code === 0) {
					this.$toast('取消订单成功');
					this.cancleOrder();
			  		this.$router.push({path: '/home/list'});
				}else {
					this.$toast(res.msg);
				}
			}, {setting, data});
		},
		endorder: function () {
			MessageBox.confirm('确定结束' + this.orderobj.id + '订单?').then(action => {
			  this.sendEnd();
			});
		},
		sendEnd: function () {
			var setting = {
				method: 'POST',
				url: '/getTruckEndOrders'
			};
			var freightId = this.getOrderId();
			var phone = this.getId();
			var id = this.getAcId();
			var data = {
				freightId: id,
				phone: phone
			};
			axios((res) => {
				if(res.code === 0) {
					this.$toast('结束订单成功');
					this.cancleOrder();
			  		this.$router.push({path: '/home/list'});
				}else {
					this.$toast(res.msg);
				}
			}, {setting, data});
		}
	},
	components: {
		mOrdermap, mOrderdetail
	}
}
</script>

<style>
</style>
